<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" media="screen" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
    <link rel="stylesheet" media="screen" href="{{ url_for('static', filename='Jcrop/css/jquery.Jcrop.css')}}">
    <link rel="stylesheet" media="screen" href="{{ url_for('static', filename='css/style.css')}}">
    <title>Target Clipper for Object Detection</title>
  </head>
  <body>
    <article>
      <header>
        <nav class="navbar navbar-default navbar-static-top" role="navigation">
          <div class="navbar-header">
            <a class="navbar-brand" href="/clipper">Target Clipper</a>
          </div>
        </nav>
      </header>
      <div class="panel panel-default">
        <div class="panel-heading text-center">
          <span id="message"></span>
          <span id="status" class="glyphicon glyphicon-ok-circle"></span>
        </div>
        <div class="panel-body text-center">
          <a href="#" id="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
          <img id="main-img" />
          <a href="#" id="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
          <div class="panel-footer">
            <div class="btn-group btn-group-lg">
              <!-- <button id="clear" class="btn btn-default">clear</button> -->
              <!-- <button id="skip" class="btn btn-default">skip</button> -->
            </div>
            <div class="progress progress-striped">
              <div class="progress-bar progress-bar-success" role="progresbar" aria-valuemin="0" aria-valuemax="100">
              </div>
              <span id="badge" class="badge badge-info"></span>
            </div>
            <div>
              <!-- <button id="sync-database" class="btn btn-default">sync database</button> -->
              <!-- <button id="reset-progress" class="btn btn-default">reset progress</button> -->
            </div>
          </div>
        </div>
      </div>
    </article>
    <script>
      var imgSrc = '{{ imgsrc }}';
      var imgTotal = '{{ imgtotal }}';
      var pos = '{{ pos }}';
      var status = '{{ status }}';
      var remain= '{{ remain }}';
      var progress = '{{ progress }}';
      var message = '{{ message }}';
    </script>
    <script src="{{ url_for('static', filename='js/jquery-2.0.3.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
    <script src="{{ url_for('static', filename='Jcrop/js/jquery.Jcrop.js') }}"></script>
    <script src="{{ url_for('static', filename='js/controller.js') }}"></script>
  </body>
</html>
